<template>
  <div class="about">
    <br />
    <div class="result"></div>
    <div id="alls">
      <div
        :class="[{ 'solid-divide': isSolid, 'dash-divide': !isSolid }]"
        ref="colour"
      >
        <p id="lineText">你好明天</p>
      </div>
    </div>
    <br />
    <p>111</p>
    <br />
    <edit-code fontSize="19" :topDistance="'78%'"> </edit-code>
    <hr />
  </div>
</template>
<script>
import editCode from "@/components/editCode.vue";

export default {
  data() {
    return {
      // 判断是否是实线
      isSolid: true,
      divide_class: "solid-divide",
      // 线色
      solidLineColor: "#909",
      dashLineColor: "#00a",
      // 从上方开始偏量
      divideTextTopDistance: "10%",
      // 字色
      fontColour: "#aa0",
      // 字大小
      size: "12",
    };
  },
  methods: {
    initLine() {
      // 线色
      this.colorLine();
      // 字色
      this.fontColor();
      // 距离顶部距离
      this.fontTopDistance();
      // 字大小
      this.fontSize();
    },
    // 给线颜色
    colorLine() {
      this.$refs.colour.className == "solid-divide"
        ? (this.$refs.colour.style.backgroundColor = this.solidLineColor)
        : (this.$refs.colour.style.borderColor = this.dashLineColor);
    },
    fontColor() {
      this.$refs.colour.children[0].style.color = this.fontColour;
    },
    fontTopDistance() {
      this.$refs.colour.children[0].style.top = this.divideTextTopDistance;
    },
    fontSize() {
      this.$refs.colour.children[0].style.fontSize = this.size + "px";
      this.$refs.colour.children[0].style.width = this.size * 1 + 1 + "px";
    },
    warning() {
      // 正则匹配，问题
      const percent = /^([0-9]\d{0,1}|100[%]{1}$)(\.\d{1,2})?%?$/; // 匹配0 —— 100%
      // /^([0-9]\d{0,1}|100$)(\.\d{1,2})?$/     0-100
      // /^([0-9]\d{0,1}|100[%]{0,1}$)(\.\d{1,2})?%?$/     匹配 0-100, 0%-100%，可为两位小数，%百分号可有可无
      if (!percent.test(this.divideTextTopDistance)) {
        console.error("需要匹配0——100%的百分比数，可带两位小数！");
        return false;
      }
    },
  },
  mounted() {
    this.warning();
    this.initLine();
  },
  components: {
    editCode,
  },
};
</script>
<style lang="scss" scoped>
#alls {
  height: 500px;
  width: 80%;
  #lineText {
    position: absolute;
    background-color: #fff;
    transform: translateX(-47%);
  }
}
.solid-divide {
  height: 100%;
  width: 1px;
  margin: 0 8px;
  position: relative;
  background-color: #000;
  vertical-align: middle;
}
.dash-divide {
  height: 100%;
  width: 0px;
  border: 0.5px dashed #000;
  margin: 0 8px;
  position: relative;
  vertical-align: middle;
}
</style>
